/**
 * 对应LocationInfo.html
 */
$(function(){


  char2();
  char1();


})

//统计分析图
function char1() {
  fetch("/dashboard/help", {
    method: 'GET'
  })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        return response.json();
      })
      .then(data => {
        const done = Number(data[0]); // 完成的帮助
        const over = Number(data[1]); // 超时的帮助

        var myChart = echarts.init($("#char1")[0]);
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'bottom',
            textStyle: {
              color: '#ffffff',
            },
            data: ['按时完成的求助','超时的求助']
          },

          calculable: false,
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  label: {
                    show: true,
                    position: 'center',
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              data: [
                {value: done, name: '按时完成的求助'},
                {value: over , name: '超时的求助'},


              ]
            }
          ]
        };

        myChart.setOption(option);
        // window.addEventListener('resize', function () {myChart.resize();})


      })
      .catch(error => {
        console.error("Error fetching GeoJSON data:", error);
      });
}
function char2() {
  fetch("/dashboard/onlinebvcount", {
    method: 'GET'
  })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        return response.json();
      })
      .then(data => {
        //offb,offv,helpingb,helpingv,waitingb,onlinev
        const offb = Number(data[0]);
        const offv = Number(data[1]);
        const helpingb = Number(data[2]);
        const helpingv = Number(data[3]);
        const waitingb = Number(data[4]);
        const onlinev = Number(data[5]);
        const onlineb = Number(data[6]);
        var myChart = echarts.init($("#char2")[0]);

        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {show: 'true', borderWidth: '0'},
          legend: {
            data: ['离线', '帮助中', '等待帮助','在线'],
            textStyle: {
              color: '#ffffff',

            }
          },

          calculable: false,
          xAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                lineStyle: {
                  color: ['#f2f2f2'],
                  width: 0,
                  type: 'solid'
                }
              }

            }
          ],
          yAxis: [
            {
              type: 'category',
              data: ['视障人士', '志愿者'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                lineStyle: {
                  width: 0,
                  type: 'solid'
                }
              }
            }
          ],
          series: [
            {
              name: '离线',
              type: 'bar',
              stack: '总量',
              itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
              data: [offb, offv]
            },
            {
              name: '帮助中',
              type: 'bar',
              stack: '总量',
              itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
              data: [helpingb, helpingv]
            },
            {
              name: '等待帮助',
              type: 'bar',
              stack: '总量',
              itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
              data: [waitingb, 0]
            },
            {
              name: '在线',
              type: 'bar',
              stack: '总量',
              itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
              data: [onlineb, onlinev]
            },

          ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () {
          myChart.resize();
        })


      })
      .catch(error => {
        console.error("Error fetching GeoJSON data:", error);
      });
}

// function char3() {
//
//   var myChart = echarts.init($("#char3")[0]);
//
//   option = {
//     legend: {
//       data:['车辆行驶数量'],
//       textStyle : {
//         color : '#ffffff',
//
//       }
//     },
//     grid: {show:'true',borderWidth:'0'},
//
//     calculable : false,
//     tooltip : {
//       trigger: 'axis',
//       formatter: "Temperature : <br/>{b}km : {c}°C"
//     },
//     xAxis : [
//       {
//         type : 'value',
//         axisLabel : {
//           formatter: '{value}',
//           textStyle: {
//             color: '#fff'
//           }
//         },
//
//         splitLine:{
//           lineStyle:{
//             width:0,
//             type:'solid'
//           }
//         }
//       }
//     ],
//     yAxis : [
//       {
//         type : 'category',
//         axisLine : {onZero: false},
//         axisLabel : {
//           formatter: '{value} km',
//           textStyle: {
//             color: '#fff'
//           }
//         },
//         splitLine:{
//           lineStyle:{
//             width:0,
//             type:'solid'
//           }
//         },
//         boundaryGap : false,
//         data : ['0', '10', '20', '30', '40', '50', '60', '70', '80']
//       }
//     ],
//     series : [
//       {
//         name:'车辆行驶数量',
//         type:'line',
//         smooth:true,
//         itemStyle: {
//           normal: {
//             lineStyle: {
//               shadowColor : 'rgba(0,0,0,0.4)'
//             }
//           }
//         },
//         data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76]
//       }
//     ]
//   };
//
//   myChart.setOption(option);
//   window.addEventListener('resize', function () {myChart.resize();})
//
// }
// function char4() {
//
//   var myChart = echarts.init($("#char4")[0]);
//
//   option = {
//     grid: {show:'true',borderWidth:'0'},
//     tooltip : {
//       trigger: 'axis',
//       axisPointer : {            // 坐标轴指示器，坐标轴触发有效
//         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//       },
//
//       formatter: function (params) {
//         var tar = params[0];
//         return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
//       }
//     },
//
//     xAxis : [
//       {
//         type : 'category',
//         splitLine: {show:false},
//         data : ['客运车','危险品车','网约车','学生校车'],
//         axisLabel: {
//           show: true,
//           textStyle: {
//             color: '#fff'
//           }
//         }
//
//       }
//     ],
//     yAxis : [
//       {
//         type : 'value',
//         splitLine: {show:false},
//         axisLabel: {
//           show: true,
//           textStyle: {
//             color: '#fff'
//           }
//         }
//       }
//     ],
//     series : [
//
//       {
//         name:'报警数量',
//         type:'bar',
//         stack: '总量',
//         itemStyle : { normal: {label : {show: true, position: 'inside'}}},
//         data:[2900, 1200, 300, 200, 900, 300]
//       }
//     ]
//   };
//
//   myChart.setOption(option);
//   window.addEventListener('resize', function () {myChart.resize();})
//
// }
